Candlestick Chart

Used in financial markets to visualize price movements over time, showing open, high, low, and close prices. This provides a rich visual representation of price action, allowing traders and investors to identify trends, patterns, and potential trading opportunities. It helps to understand the volatility and momentum of price movements, and to make informed trading decisions.

Chart:

Code:

const DATE_FIELD = "Day(date)";
const OPEN_FIELD = "Average open";
const HIGH_FIELD = "Average high";
const LOW_FIELD = "Average low";
const CLOSE_FIELD = "Average close";

muze
  .canvas()
  .data(data)
  .columns([DATE_FIELD])
  .rows([
    muze.Operators.share(
      OPEN_FIELD,
      HIGH_FIELD,
      LOW_FIELD,
      CLOSE_FIELD
    ),
  ])
  .layers([
    {
      mark: "tick",
      encoding: {
        x: DATE_FIELD,
        y: HIGH_FIELD,
        y0: LOW_FIELD,
        size: {
          value: () => 0.001,
        },
        color: {
          value: () => "#000",
        },
        opacity: {
          value: () => 0.3,
        },
      },
      transition: {
        disabled: true,
      },
    },
    {
      mark: "bar",
      encoding: {
        x: DATE_FIELD,
        y: OPEN_FIELD,
        y0: CLOSE_FIELD,
        color: "trend_status",
      },
      transition: {
        disabled: true,
      },
    },
  ])
  .config({
    axes: {
      y: {
        showAxisName: false,
      },
    },
    legend: {
      color: {
        show: false,
        fields: {
          trend_status: {
            domainRangeMap: {
              bullish: "#B3DE69",
              bearish: "#FB8072",
            },
          },
        },
      },
    },
  })
  .mount("#chart");